<template>
  <div>
    <div>原始数据{{ count }}</div>
    <div>改变数据：{{ updatecount }}</div>
    <button @click="add">增加数据</button>
    <ul v-for="(item, index) in data" :key="index">
      <!-- <li v-if="item >= 10" class="on">
        {{ item }}
      </li> -->
      <li :class="index % 2 == 1 ? 'on' : ''">
        {{ item }}
      </li>
    </ul>
    <!-- 动态样式 -->
    <div :class="dongtai">我是动态样式</div>
    <div :class="['on','active']">数组的形式</div>
    <!-- <div class="dong">我是动态样式</div> -->
  </div>
</template>
<script setup lang='ts'>
import TheWelcome from '../components/TheWelcome.vue'
import { ref, computed, watch, reactive } from 'vue'
const count = ref(10)
const data = reactive([1, 2, 3, 4, 19, 29, 33])
const updatecount = computed(() => {
  return count.value * 2
})
// 监听一下变化
watch(count, (updatecount, count) => {
  console.log(`watch数据发生改变了,从${count}变成${updatecount}`)
})
//增加
const add = () => {
  count.value++
}
//计算属性的增加  item大于10的
const filterarr = computed(() => {
  return data.filter((item) => item >= 10)
})
//计算动态样式
const zhen = ref(true)
const jia = ref(null)
// const dongtai = computed(()=>({
//    active:zhen.value && !jia.value,
//    col:zhen.value && !jia.value,
// }))
const dongtai = computed(() => {
  return {
    active: zhen.value && !jia.value,
    // col:zhen.value && !jia.value,
  };
});
</script>


<style lang='scss'>
.on {
  color: red;
  font-size: 36px;
  font-weight: bolder;
}
.active{
  color: green;
}
.col{
  color: #fcc;
}
</style>
